<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>样式</title>
		<!--关联外部样式：link标签 -->
		<link href="css/font-style.css" rel="stylesheet"/>
		<!-- 内部样式：type可有可无 -->
		<style typ="text/css">
			h3{
				color:green;   /* 字体颜色 */
				font-size: 28px;    /*字体大小 */
				tect-align: center;  /*文本居中显示*/
			}
			p{
				color:blue;
			}
			.col{
				font-size: 36px;
			}
			#size{    /*id选择器 */
				color: green;
			}
			.font1 li{
				color:red;
			}
			ol li{
				font-size:24px;
			}
		</style>
	</head>
	<body>
		<!-- css:层叠样式表，级联样式表 -->
		<!--
		引入样式：
		 1.内联样式：在标签中加入style属性
		 2.内部样式：在html文件中用style标签书写
		 3.外部样式：
		   step1:书写css样式文本
		   step2:在html文件中用link关联样式表。
		同时对一个标签作用内联样式，内部样式和外部样式时，样式采用的优先级：
		内联样式优先级最高，
		内部样式和外部样式中谁离标签更近，谁的优先级更高。-->
		<!--
		选择器：
		    1.标签选择：选择标签
			2.类选择：在结构中用class属性，在样式中用.类名
			3.id选择：在结构中用id属性，在样式中用#id名
		-- >	
		 color:字体颜色
		 font：文字    size：大小     font-size：字体大小
		 -->
		<h2 style="color: blue; font-size: 32px;">古诗中文网</h2>   <!-- 内联样式 -->
		<h3 class ="col">蒹葭</h3>
		<p class="col">蒹葭苍苍，白露为霜</p>
		<p class="col" id="size">所谓伊人，在水一方</p>
		<ul>
			<li>首页</li>
			<li>商品详情</li>
		</ul>
	</body>
</html>
